<script>
import SvgIcon from '@/components/svgIcon'
import { useEditor } from '@/views/Editor/app'
import { keybindMap } from '@/views/Editor/utils/constants'
import {
  Frame,
  Group,
} from 'leafer-ui'
import { defineComponent } from 'vue'

export default defineComponent({
  components: { SvgIcon },
  setup() {
    const {
      canvas,
      keybinding,
    } = useEditor()

    const isGroupBtnEnabled = computed(() => {
      return !canvas.activeObjectIsType('Frame') && canvas.getActiveObjects().length > 1
    })

    const isUnGroupBtnEnabled = computed(() => {
      return canvas.activeObjectIsType('Group')
    })

    const handleGroupBtnClick = () => {
      if (isGroupBtnEnabled.value) {
        keybinding.trigger(keybindMap.group)
      }
    }
    const handleUnGroupBtnClick = () => {
      if (isUnGroupBtnEnabled.value) {
        keybinding.trigger(keybindMap.ungroup)
      }
    }

    return {
      isGroupBtnEnabled,
      isUnGroupBtnEnabled,
      handleGroupBtnClick,
      handleUnGroupBtnClick,
    }
  },
})
</script>

<template>
  <div>
    <ATooltip
      effect="dark"
      content="创建分组"
      mini
    >
      <AButton
        class="icon-btn pd-5px"
        :disabled="!isGroupBtnEnabled"
        @click="handleGroupBtnClick"
      >
        <SvgIcon name="object-group" />
      </AButton>
    </ATooltip>
    <ATooltip
      effect="dark"
      content="解除分组"
      mini
    >
      <AButton
        class="icon-btn pd-5px"
        :disabled="!isUnGroupBtnEnabled"
        @click="handleUnGroupBtnClick"
      >
        <SvgIcon name="object-ungroup" />
      </AButton>
    </ATooltip>
  </div>
</template>
